<template>
  <div><Charts :option="option" ref="chart" /></div>
</template>

<script>
import Charts from "@/components/Charts.vue";
export default {
  name: "Chart4",
  components: { Charts },
  props: ["chartData"],
  data() {
    return {
      option: {},
    };
  },
  methods: {
    computedOption() {
      const nameList = this.chartData.map((item) => item.project_name);
      const valueList = this.chartData.map(
        (item) => item.annualConsolidatedRevenueCompletionRate
      );
      const option = {
        title: {
          show: true,
          text: "并表营收可研兑现情况",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          align: "right",
          right: 0,
        },
        xAxis: {
          type: "category",
          data: nameList,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "年度并表营收完成率",
            data: valueList,
            type: "bar",
            barWidth: 30,
            itemStyle: {
              color: "#cca035",
            },
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
            },
          },
        ],
      };
      this.option = option;
    },
  },
  watch: {
    chartData: {
      immediate: true,
      handler() {
        this.computedOption();
      },
    },
  },
};
</script>

<style>
</style>